<template>
  <div>
    
  <el-row>
   <el-button type="primary" icon="el-icon-plus" style="margin: 6px 6px" @click="showAddDialog">添加</el-button>
  <el-table
    :data="menus"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="id"
      label="ID"
      width="80">
    </el-table-column>
    <el-table-column
      prop="title"
      label="名称"
      width="100">
    </el-table-column>
    <el-table-column
      prop="icon"
      label="图标"
      width="70">
      <template slot-scope="getIcon">
          <i :class=getIcon.row.icon></i>
      </template>
    </el-table-column>
    <el-table-column
      prop="type"
      label="类型"
      width="70">
      <template slot-scope="getType">
          <p v-if="getType.row.type==0">
            <el-tag>目录</el-tag>
        </p>
        <p v-else-if="getType.row.type==1">
            <el-tag type="success">菜单</el-tag>
        </p>
        <p v-else-if="getType.row.type==2">
            <el-tag type="danger">按钮</el-tag>
        </p>
      </template>
      
    </el-table-column>
    <el-table-column
      prop="parenttitle"
      label="上级菜单">
    </el-table-column>
    <el-table-column
      prop="path"
      label="菜单url">
    </el-table-column>
    <el-table-column
      prop="perms"
      label="授权标识">
    </el-table-column>

    <el-table-column
      prop="orderNum"
      label="排序">
    </el-table-column>
    
    <el-table-column
      prop="cz"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="edit(scope.row.id)" icon="el-icon-edit" type="info" size="mini">编辑</el-button>
        <el-button @click="del(scope.row.id)" icon="el-icon-delete" type="danger" size="mini" slot="reference">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <add-menu-list-dialog @refresh="refresh" ref="addDialog"></add-menu-list-dialog>
  <edit-menu-list-dialog @refresh="refresh" ref="editDialog"></edit-menu-list-dialog>
</el-row>
</div>
</template>
<script>
import http from '@/utils/request.js'
import AddMenuListDialog from './AddMenuListDialog.vue'
import EditMenuListDialog from './EditMenuListDialog.vue'

export default {
  components: {
    AddMenuListDialog,
    EditMenuListDialog
  },
    data() {
      return {
        // radio: '1',
        // value:true,//switch开关的默认状态//单选框的默认状态
        // addmenulist: false,//dialog表单默认不显示
        // form: {
        //   radio:'1',
        // },
        menus: [],
        radio:'1',
        id:'',
        title:'',
        parentId:'',
        path:'',
        name:'',
        perms:'',
        type:'',
        icon:'',
        orderNum:'',
        parenttitle:'',
        hidden:''
      };
    },
    mounted(){
      this.goto();
  },
    methods: {
      goto(){
        http.get(`menu-list`)
      .then(res =>{
        // console.log(res) 
        this.menus = res
    })
      },
      showAddDialog(){
        this.$refs.addDialog.addMenuListDialogVisible = true
      },

      handleChange(value) {
        console.log(value);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
      load( tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            
          ])
        }, 1000)
      },

      refresh(){
        this.reload()
      },
      edit(id){
        this.$refs.editDialog.getById(id);
        this.$refs.editDialog.editMenuListDialogVisible = true
          console.log(id);
      },
      async del(id) {
      console.log(id);
      try {
        // 对于this.confirm() 使用 await等待的时候，用户点击取消，是通过抛异常的方式
        await this.$confirm("你确定要删除这条数据吗?", "警告", {
          confirmButtonText: "yes",
          cancelButtonText: "no",
          closeOnClickModal: false,
          type: "success",
        });
        // 代码如果能够走下来表示用户点击了确认按钮
        // 删除用户
        await http.delete(`menu-list/${id}`);
        this.$message({ message: "删除成功", type: "success", duration: 1000 });
        this.goto();
      } catch (err) {
        // 代码如果进入了 catch块，表示用户点击了取消按钮
        console.log(err);
      }
    },
    refresh(){
      this.goto()
    }
    },
  }
</script>

<style>

</style>
